<!-- 系统状态概览 -->
<template>
  <div class="wrap">
    <span class="title">系统状态概览</span>
    <div class="main">
      <!-- <el-row :gutter="3">
        <el-col  :span="8"><div class="coldiv left">设备授权</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.CorpName}} ({{ list.CorpUUID }})</div></el-col>
      </el-row> -->
      <!-- <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">授权有效期</div></el-col>
        <el-col :span="16">
          <div class="coldiv">{{list.ValidTime}}
            <span v-show="this.Days > 30" style="margin-left:10px; color:#409EFF;">({{this.Days}}天)</span>
            <span v-show="this.Days <= 30 && this.Days > 7" style="margin-left:10px; color:#E6A23C;">({{this.Days}}天)</span>
            <span v-show="this.Days <= 7 && this.Days > 0" style="margin-left:10px; color:#F56C6C;">({{this.Days}}天)</span>
            <span v-show="this.Days <= 0" style="margin-left:10px; color:#909399;">(已过期)</span>
          </div>
        </el-col>
      </el-row> -->
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">版本号</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.Version}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">有线地址</div></el-col>
        <el-col :span="16"><div class="coldiv"><svg-icon :icon-class="list.EthStatus === 1 ? 'wangkaup' : 'wangkadown'" style="margin-right:10px;"/>{{list.EthStatus === 1 ? list.EthIP : '未连接'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">无线地址</div></el-col>
        <el-col :span="16"><div class="coldiv"><svg-icon :icon-class="list.WifiStatus === 1 ? 'wangkaup' : 'wangkadown'" style="margin-right:10px;"/>{{list.WifiStatus === 1 ? list.WifiIP : '未连接'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">连续运行</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress">{{list.KeepRunningSeconds}}<el-button @click="condition()" size="mini" style="margin-left: 20px;">运行状态</el-button></div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">设备时间</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.CurrentTime}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">温度</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.Temperature === 0 ? '--' : list.Temperature + '℃'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">系统磁盘</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.DiskUsedPct"></el-progress>{{list.DiskUsed}}/{{list.DiskTotal}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">CPU使用率</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.CPURate"></el-progress></div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">内存使用</div></el-col>
        <el-col :span="16"><div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.MemUsedPct"></el-progress>{{list.MemUsed}}/{{list.MemTotal}}</div></el-col>
      </el-row>
    </div>
    <el-dialog v-el-drag-dialog title="服务状态" :close-on-click-modal="false" :close-on-press-escape=false :visible.sync="dialogTableVisible" width="60%">
      <!-- <el-table :data="runList" stripe border>
        <el-table-column property="proc" label="组件名称" align="center"></el-table-column>
        <el-table-column property="version" label="组件版本"  align="center"></el-table-column>
        <el-table-column property="pid" label="组件id"  align="center"></el-table-column>
        <el-table-column property="update_time" label="最近活跃时间" align="center"></el-table-column>
        <el-table-column property="cpu" label="组件使用CPU" align="center"></el-table-column>
        <el-table-column property="mem" label="组件占用内存" align="center"></el-table-column>
        <el-table-column property="md5" label="组件MD5" align="center" width="350px"></el-table-column>
      </el-table> -->
      <!-- <div style="display: flex; justify-content: space-around;"> -->
        
    <div  style="display: flex; justify-content: space-around;" >
      
      <div  v-for="(item, index) in runList" :key="index" :data="Colors">
        <svg  height="240" style="display: flex; justify-content: center; align-items: center;" width="140">
    <circle cx="50%" cy="25%" r="45" :stroke="Colors[item.show?2:0].color" stroke-width="3" fill="none" />
    <text x="50%" y="25%" dominant-baseline="middle" text-anchor="middle" :fill="Colors[item.show?2:0].color"  letter-spacing="2" v-if="item.show">
      正常
    </text>
    <text x="50%" y="25%" dominant-baseline="middle" text-anchor="middle" :fill="Colors[item.show?2:0].color"  letter-spacing="2" v-if="!item.show">
      异常
    </text>
    <text  x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">{{item.proc}}</text>
    <text  x="50%" y="70%" dominant-baseline="middle" text-anchor="middle"  fill="grey">{{item.version}}</text>
    <!-- <text  x="50%" y="80%" dominant-baseline="middle" text-anchor="middle"  fill="grey" v-if="item.update_time.length">{{item.update_time}}喂狗</text> -->
    <text  x="50%" y="80%" dominant-baseline="middle" text-anchor="middle"  fill="grey" v-if="item.mem.length">内存：{{item.mem}}</text>
    </svg>  
      </div>
  </div>
      <!-- </div> -->
      
  
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import systemChart from './systemChart'
import { connrequest } from '@/api/firstPage.js'
import { parseTime, formatTime } from '@/utils/index.js'
export default {
  directives: { elDragDialog },
  components: {systemChart},
  data() {
  return {
    dialogTableVisible: false,
    // Days: '',
    runList:[],
    Colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]
    // list:{
    //   系统资源: ''
    // }
  }
},
props:{
  list:{},
  Days: ''
},
//生命周期 - 创建完成（访问当前this实例）
created() {
  // this.getData() 
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {},
methods: {
  async getData(){
    // const res = await connrequest('CenterGetFirstPage')
    
    // let d = Math.floor(res.Data.KeepRunningSeconds / 3600 / 24);
    // let h = Math.floor((res.Data.KeepRunningSeconds  % 86400) / 3600);
    // var m = Math.floor(((res.Data.KeepRunningSeconds % 86400) % 3600) / 60);
    // res.Data.KeepRunningSeconds = `${d < 1 ? '' : d}${d < 1 ? '' : '天'} ${h}小时 ${m}分钟`;
    // res.Data.EthIP = res.Data.EthIP ? res.Data.EthIP : '接口无效'
    // res.Data.WifiIP = res.Data.WifiIP ? res.Data.WifiIP : '接口无效'
    // let now = new Date().getTime()
    // // this.Days = this.dateTrans(res.Data.ValidTime*1000 - now)
    // this.Days = Math.floor((res.Data.ValidTime*1000 - now) / 86400 / 1000)
    // res.Data.ValidTime = parseTime(res.Data.ValidTime, '{y}-{m}-{d}')
    // res.Data.CurrentTime = parseTime(res.Data.CurrentTime)
    // res.Data.MemUsedPct = ((res.Data.MemUsed / res.Data.MemTotal) * 100).toFixed(1) * 1
    // res.Data.MemUsed = (res.Data.MemUsed / 1000000).toFixed(2) + 'G'
    // res.Data.MemTotal = (res.Data.MemTotal / 1000000).toFixed() + 'G'
    // res.Data.DiskUsedPct = ((res.Data.DiskUsed / res.Data.DiskTotal) * 100).toFixed(1) * 1
    // res.Data.DiskUsed = (res.Data.DiskUsed / 1000000).toFixed(2) + 'G'
    // res.Data.DiskTotal = (res.Data.DiskTotal / 1000000).toFixed(0) + 'G'
    // this.list = {...res.Data}
  },
  dateTrans(date) {
    let computeTime = date / 1000
    let year = Math.floor(computeTime / 86400 / 365);
    computeTime = computeTime % (86400 * 365);
    let month = Math.floor(computeTime / 86400 / 30);
    computeTime = computeTime % (86400 * 30);
    let day = Math.floor(computeTime / 86400);
    computeTime = computeTime  % 86400;
    return `${year > 0 ? year + '年' : ''}${month > 0 ? month + '月' : ''}${day}天`;
  },
  async condition(){
    this.runList = []
    const res = await connrequest('GetWatchDog')

    if (res.Status.StatusCode === 0) {
      // formatTime
      for (const key in res.Data) {
        switch (res.Data[key].proc) {
          case 'agent_dcd':
            res.Data[key].proc = '装置维护服务'
            break;
          case 'agent_platform':
            res.Data[key].proc = '业务通讯服务'
            break;
          case 'agent_rsa':
            res.Data[key].proc = '终端管理服务'
            break;
          case 'autodel':
            res.Data[key].proc = '数据维护服务'
            break;
          case 'uis':
            res.Data[key].proc = '终端托盘服务' 
            break;
          case 'agent_file':
            res.Data[key].proc = '数据通讯服务'
            break;
          case 'agent_upgrade':
            res.Data[key].proc = '终端升级服务'
            break;
        }
        res.Data[key].cpu = res.Data[key].cpu + '%'
        res.Data[key].mem = res.Data[key].mem > 1000 ? (res.Data[key].mem / 1000).toFixed(2)+ 'M' : res.Data[key].mem + 'K'
        const updateTime = new Date(res.Data[key].update_time);
        const currentTime = new Date();
        if ((currentTime - updateTime) > 180000) {
         res.Data[key].show = false 
        } else {
          res.Data[key].show = true 
        }
        res.Data[key].update_time = formatTime(new Date(res.Data[key].update_time))

        this.runList.push(res.Data[key])
      }

      this.dialogTableVisible = true;
    }
  }
}
}
</script>
<style scoped lang='scss'>
.wrap {
  height: 375px;
  overflow: hidden;
  ::v-deep .main{
    margin-top: 15px;
    font-size: 14px;
    .el-col{
      .coldiv{
        height: 34px;
        line-height: 34px;
        padding-left: 10px;
        margin-bottom: 3px;
        border: 1px solid #E6EAEE;
        white-space: nowrap;
        .el-progress{
          display: inline-block;
          width: 120px !important;
        }
        .el-progress__text{
          font-size: 14px !important;
        }
      }
      .hasprogress{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 10px;
      }
    }
    .left{
      background: #eff3f6;
      text-align: right;
      padding-right: 10px;
    }
  }
}
</style>